{% extends 'base.html' %}
{% load static %}
{% block title %}活动管理{% endblock %}
{% block extra_css %}
<link href="{% static 'dashboard/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">{% endblock %}
{% block modal %}
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">活动修改</h4>
            </div>
            <div class="modal-body">
                <div style="width:100%;padding: 10px 20px 10px 20px">
                    <form id="ea_form">
                        {% csrf_token %}
                        活动名称: <input name="act_name" type="text" value="{{ act.name }}"> <br>
                        活动简介: <br>
                        <textarea name="intro" cols="50" rows="3">{{ act.introduction }}</textarea> <br>
                        活动人数: <input name="capacity" type="number" min="1" max="99999" value="{{ act.capacity }}"> <br>
                        开始日期: <input name="start_date" type="text" id="datetimepicker0"
                            data-date-format="yyyy-mm-dd hh:ii" value="{{ act.start_date|date:'Y-m-d H:i:s' }}"> <br>
                        结束日期: <input name="end_date" type="text" id="datetimepicker1"
                            data-date-format="yyyy-mm-dd hh:ii" value="{{ act.end_date|date:'Y-m-d H:i:s' }}"> <br>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="ea_sub" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加报名</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-6">
                        <form class="input-group" id="search">
                            {% csrf_token %}
                            <input name="search_content" type="text" class="form-control" placeholder="输入学号或姓名">
                            <span class="input-group-btn">
                                <button id="search_btn" class="btn btn-default" type="button">搜索</button>
                            </span>
                        </form><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                    <div id="result_list">

                    </div>
                </div><!-- /.row -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <!-- <button id="en_sub" type="button" class="btn btn-primary">确定</button> -->
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="prizeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">奖项管理</h4>
            </div>
            <div class="modal-body">
                <div style="width:100%;padding: 10px 20px 10px 20px">
                    <form id="as_form">
                        {% csrf_token %}
                        <input type="hidden" name="act_id" value="{{ act.activity_ID }}">
                        活动名称: <p id="act_name"></p>
                        学生姓名: <p id="stu_name"></p>
                        学号: <p id="stu_idno"></p>
                        <input type="hidden" id="stu_id" name="stu_id" value="0">
                        班级: <p id="department"></p>
                        所获奖项: <input id="award" name="award" type="text" > <br>
                        加分类别：<input id="score_kind" name="score_kind" type="text" > <br>
                        得分：<input id="score" name="score" type="number" > <br>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="as_sub" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="downModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">文件下载</h4>
                </div>
                <div class="modal-body">
                    <div class="row" >
                        <div class="col-lg-12" id="dispath">

                        </div>
                    </div><!-- /.row -->
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="en_sub" type="button" class="btn btn-primary">确定</button>
                </div> -->
            </div>
        </div>
    </div>
{% endblock %}
{% block act_manager %}active{% endblock %}
{% block modal_button %}
{% endblock %}
{% block table_title %}
<ol class="breadcrumb">
    <li><a href="/dashboard/act_manager/">我创建的活动</a></li>
    <li><a>活动详情</a></li>
    <li><a class="active">{{ act.name }}</a></li>
</ol>
{% endblock %}
{% block font_content %}
<div>
    <ul class="list-group">
        <li class="list-group-item">
            活动名称：{{ act.name }}
        </li>
        <li class="list-group-item">
            活动简介：{% firstof act.introduction '无' %}
        </li>
        <li class="list-group-item">
            发布者：{% firstof act.organizer.first_name act.organizer.username %}
        </li>
        <li class="list-group-item">
            已报名人数/活动容量：{{ count }}/{{ act.capacity }}
        </li>
        <li class="list-group-item">
            开始日期：{{ act.start_date|date:'Y-m-d H:i:s' }}
        </li>
        <li class="list-group-item">
            结束日期：{{ act.end_date|date:'Y-m-d H:i:s' }}
        </li>
        <li class="list-group-item">
            操作：
            <a class="btn btn-default btn-xs" data-toggle="modal" data-target="#editModal">修改信息</a>
            <a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#addModal">添加报名</a>
            <a class="btn btn-success btn-xs" href="{% url 'dashboard:shared' act.activity_ID %}">分享活动</a>
            <a class="btn btn-warning btn-xs" id="makeBook" data-toggle="modal" data-target="#downModal">生成报表</a>
            <a class="btn btn-danger btn-xs" href="">删除活动</a>
        </li>
    </ul>
</div>
<h4>&nbsp;&nbsp; 活动人员名单</h4>
{% endblock %}
{% block table_content %}
<thead>
    <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
        <th>获得奖项</th>
        <th>所加分数</th>
        <th>操作</th>
    </tr>
</thead>
<tbody>
    {% if entry_list %}
    {% for entry in entry_list %}
    <tr>
        <td>{{ entry.student.name }}</td>
        <td>{{ entry.student.student_ID }}</td>
        <td>{{ entry.student.enroll_year }}级{{ entry.student.major }}{{ entry.student.department }}班</td>
        <td>{{ entry.awards }}</td>
        <td>{{ entry.score_kind }}:{{ entry.score }}</td>
        <td>
            <a class="btn btn-primary btn-xs" type="button"
            data-act_name="{{ act.name }}" 
            data-stu_name="{{ entry.student.name }}" 
            data-stu_id="{{ entry.student.student_ID }}"
            data-stu_department="{{ entry.student.enroll_year }}级{{ entry.student.major }}{{ entry.student.department }}班"
            data-award="{{ entry.awards }}"
            data-score_kind="{{ entry.score_kind }}"
            data-score="{{ entry.score }}"
            data-toggle="modal" 
            data-target="#prizeModal"
            >获奖管理</a>
            <a class="btn btn-danger btn-xs" href="#">删除</a>
        </td>
    </tr>
    {% endfor %}
    {% else %}
    <tr>
        <td>无数据</td>
    </tr>
    {% endif %}
</tbody>
{% endblock %}
{% block extra_js %}
<script src="{% static 'dashboard/javascript/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'dashboard/javascript/transf.js' %}"></script>
<script type="text/javascript">
    $('#datetimepicker0').datetimepicker();
    $('#datetimepicker1').datetimepicker();
    sub('#ea_sub', '#ea_form', "{% url 'dashboard:edit_act' act.activity_ID  %}",
        "{% url 'dashboard:act_info' act.activity_ID  %}")
    sub('#as_sub', '#as_form', "{% url 'dashboard:award_give' %}",
        "{% url 'dashboard:act_info' act.activity_ID  %}")
    $('#search_btn').click(function () {
        $.ajax({
            type: 'post',
            dataType: 'html',
            url: '/dashboard/search/',
            data: $('#search').serialize(),
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                var dataList = JSON.parse(data)
                // alert(JSON.parse(data)[0].fields.name)
                var flag = 1
                var tableBody =
                    '<table class="table table-striped"><thead><tr><th>姓名</th><th>学号</th><th>班级</th><th>操作</th></tr></thead><tbody>'
                for (var i of dataList) {
                    var oneField = i.fields
                    var secBtn =
                        "<a type=\"button\" class=\"btn btn-primary btn-xs\" id=\"enrollButton\" data-actId=\"{{ act.activity_ID }}\" data-stuId=\"" +
                        i.pk + "\" data-num=\"" + flag +
                        "\" data-backdrop=\"'static'\" onclick=\"enroll(this)\">添加</a>"
                    tableBody = tableBody + "<tr><td>" + oneField.name + "</td><td>" + i.pk +
                        "</td><td>" + oneField.enroll_year + "级" + oneField.major + oneField
                        .department + "班" + "</td><td>" + secBtn + "</td></tr>"
                    flag++
                }
                tableBody = tableBody + "</tbody></table>"
                document.getElementById("result_list").innerHTML = tableBody
                // location.replace(rep_url)
            }
        })
    })

    function enroll(as) {
        var a = $(as)
        var stu_id = a.data("stuid")
        var act_id = a.data("actid")
        var url = "manual_enroll?act_id=" + act_id + "&stu_id=" + stu_id
        $.get(encodeURIComponent(url), function (result) {
            var result_list = document.getElementById("result_list")
            if (result == "200") {
                a.html = "已报名"
                a.attr('disabled', 'disabled')
                var sucMsg = document.createElement("div")
                sucMsg.setAttribute('class', 'alert alert-success alert-dismissible')
                sucMsg.setAttribute('role', 'alert')
                sucMsg.innerHTML = '添加成功。'
                result_list.after(sucMsg)
            } else if (result == "002") {
                // var btn = document.getElementById("enrollButton")
                a.html = "已报名"
                a.attr('disabled', 'disabled')
                var warnMsg = document.createElement("div")
                warnMsg.setAttribute('class', 'alert alert-warning alert-dismissible')
                warnMsg.setAttribute('role', 'alert')
                warnMsg.innerHTML = '对象在此之前已经被添加。'
                result_list.after(warnMsg)
            }
        });
    }
    $('#addModal').on('hidden.bs.modal', function (e) {
        window.location.reload()
    })
    $('#prizeModal').on('show.bs.modal', function (event) {
		var button = $(event.relatedTarget)
        var act_name = button.data('act_name')
        var stu_name = button.data('stu_name')
        var stu_id = button.data('stu_id')
        var stu_depart = button.data('stu_department')
        var award = button.data('award')
        var score_kind = button.data('score_kind')
		var score = button.data('score')
		var modal = $(this)
        modal.find('#act_name').text(act_name)
        modal.find('#stu_name').text(stu_name)
        modal.find('#stu_idno').text(stu_id)
        modal.find('#stu_id').val(stu_id)
        modal.find('#department').text(stu_depart)
        modal.find('#award').val(award)
        modal.find('#score_kind').val(score_kind)
        modal.find('#score').val(score)
    })
    $('#makeBook').click(function(){
        var dispath = $('#dispath')
        dispath.append('系统正在生成，请稍等...')
        $.get("{% url 'dashboard:get_report' act.activity_ID %}", function (result) {
            dispath.empty()
            dispath.append('<a href="' + result + '">' + result + '</a>')
        })
    })
    $('#downModal').on('hidden.bs.modal', function (e) {
        var dispath = $('#dispath')
        dispath.empty()
    })
</script>{% endblock %}